<template>
  <div>
    <div class="card-title">退租信息</div>
    <el-form ref="form" class="form-wrap" size="small" :model="formData">
      <el-form-item label="终止类型" prop="endType">
        <span>{{endType}}</span>
      </el-form-item>
      <el-form-item label="合同终止日期" prop="backDate">{{formData!=null?formData.backDate:""}}</el-form-item>
      <el-form-item label="退租人" prop="backPerson">{{formData!=null?formData.backPerson:""}}</el-form-item>
      <el-form-item label="退租人证件号" prop="certificateNum">
        <span>{{formData!=null?formData.backCertificateNum:""}}</span>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <span>{{formData!=null?formData.remarks:""}}</span>
      </el-form-item>
      <el-form-item label="是否已结清费用" prop="feeComplete">
        <span>{{formData!=null?(formData.feeComplete==1?"已结清":"未结清"):""}}</span>
      </el-form-item>
    </el-form>
    <div class="card-title">附件</div>
    <el-row :gutter="20">
      <el-col>
        <v-upload type="file" ref="myUpload" modelType="rent-contract" :isShowFileList="true" :isView="true" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getContractBack } from '../../api/rent-contract.js'

export default {
  name: "contract-back-view",
  data () {
    return {
      rentContractBackId: "",
      endType: "",
      formData: {
        rentContractBackId: null,
        endType: null,
        backDate: null,
        backPerson: null,
        backCertificateNum: "",
        remarks: "",
        feeComplete: 0
      },
      fileList: [],
    }
  },

  computed: mapState({
    //调价方式
    contractEndType: state => {
      let data = state.dict.find(item => item.type === "contract_end_type") || {};
      return data.children || [];
    }
  }),
  methods: {
    //加载数据
    loadBackInfo (contractId) {

      let rentContractId = contractId;
      let category = 1
      getContractBack(rentContractId, category).then(
        response => {
          if (response.data.code == 0) {

            this.formData = response.data.data;

            for (var j = 0, len = this.contractEndType.length; j < len; j++) {
              if (this.formData != null && this.contractEndType[j].value == this.formData.endType) {
                this.endType = this.contractEndType[j].label;
              }
            }
            //加载退租附件
            if (this.formData != null) {
              this.$refs.myUpload.getFiles(this.formData.rentContractBackId);
            }
          } else {
            this.$alert("读取合同退租信息返回错误：" + response.data.code + response.data.message);
          }
        }
      )
    }
  }
}


</script>
<style scoped lang="scss">
@include formWrap();
</style>
